<div class="container my-5 w-100">
    <div class="row justify-content-center">

        <!-- 标题 -->
        <div class="text-center mb-4">
            <h5 class="fw-bold text-primary">数据表结构配置</h5>
            <p class="text-muted">选择表并配置字段展示方式</p>
        </div>

        <!-- 控件区：下拉 + 按钮 -->
        <div class="d-flex flex-wrap gap-2 align-items-center mb-4">
            <select class="form-select flex-grow-1 w-50 " id="tabelStructureSelected" aria-label="选择数据表">
                <option value="" selected>请选择表...</option>
                <!-- 选项由 JS 动态填充 -->
            </select>
            <button id="load" type="button" class="btn btn-primary px-4">
                <i class="bi bi-plus-circle me-1"></i> 添加
            </button>
        </div>

        <!-- 动态表格容器 -->
        <div id="tables" class="mb-4">
            <!-- DataTables 将动态插入到这里 -->
        </div>

        <!-- 操作按钮组 -->
        <div class="d-flex justify-content-end gap-2">
            <button id="cancel" type="button" class="btn btn-outline-secondary px-4" data-bs-dismiss="modal">取消</button>
            <button id="execute" type="button" class="btn btn-success px-4">
                <i class="bi bi-play-fill me-1"></i> 保存
            </button>
        </div>

    </div>
</div>

<script type="module" src="/src/components/modal/table/table.js"></script>

<style>
    /* 按钮悬停效果 */
    .btn {
        transition: all 0.2s ease;
    }

    .btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    /* 表格容器间距 */
    #tables .generated-table-container {
        border: 1px solid #e9ecef;
        border-radius: 8px;
        padding: 16px;
        background-color: #f8f9fa;
    }

    /* 响应式适配 */
    @media (max-width: 576px) {
        .d-flex.flex-wrap {
            flex-direction: column;
        }

        .btn {
            width: 100%;
        }
    }
</style>